<template>
    <div class='footer'>
       
        <router-link  v-for='(item) in list' :key='item.id' :to='item.url' class='rou'>
             <svg class="icon" aria-hidden="true">
                <use :xlink:href="`#icon-${item.icon}`"></use>


            </svg>
            <p>{{item.name}}</p>

        </router-link>    
    </div>
</template>
<script>
export default {
    name:'footerCom',
    data(){
        return {
             list:[
            {id:1,name:"首页",url:'/home',icon:'shouye'},
            {id:2,name:"分类",url:'/fenlei',icon:'fenleishouye'},

            {id:3,name:"喜欢",url:'/gouwuche',icon:'gouwuche2'},
            {id:4,name:"我的",url:'/my',icon:'iconfontren'},
        ]
        }
       
    }

}
</script>
<style>
    .footer{
        width:100%;
        height:1.14rem;
        /* background: #000; */
        position:absolute;
        bottom:0px;
        left:0px;
        display: flex;
        justify-content: center;
        align-items: center;


    }
    .rou{
        width: 25%;
        height: 1.14rem;
          display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
       
    }
    .rou p{
        margin-top: 0.13rem;
    }
.router-link-active{
    color:red;
}

</style>